<template>
  <div class="manage-activities">
    <div class="page-header">
      <h2>活动管理</h2>
      <el-button type="primary" @click="$router.push('/club/publish')">
        发布活动
      </el-button>
    </div>

    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="活动名称">
          <el-input
            v-model="searchForm.title"
            placeholder="请输入活动名称"
            clearable
            @clear="handleSearch"
          />
        </el-form-item>
        <el-form-item label="活动状态">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择活动状态"
            clearable
            @clear="handleSearch"
          >
            <el-option label="未开始" value="NOT_STARTED" />
            <el-option label="报名中" value="ENROLLING" />
            <el-option label="已结束" value="ENDED" />
            <el-option label="已满" value="FULL" />
          </el-select>
        </el-form-item>
        <el-form-item label="活动类型">
          <el-select
            v-model="searchForm.type"
            placeholder="请选择活动类型"
            clearable
            @clear="handleSearch"
          >
            <el-option label="文体活动" value="SPORTS" />
            <el-option label="学术讲座" value="ACADEMIC" />
            <el-option label="志愿服务" value="VOLUNTEER" />
            <el-option label="文化交流" value="CULTURE" />
            <el-option label="其他" value="OTHER" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 活动列表 -->
    <el-table :data="activities" style="width: 100%" v-loading="loading">
      <el-table-column prop="title" label="活动名称" min-width="200" show-overflow-tooltip />
      <el-table-column prop="type" label="类型" width="100">
        <template #default="{ row }">
          {{ getActivityType(row.type) }}
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间" width="180">
        <template #default="{ row }">
          {{ formatDate(row.startTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="enrollCount" label="报名情况" width="120">
        <template #default="{ row }">
          {{ row.enrollCount }}/{{ row.maxEnroll }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="viewDetails(row)">
            查看详情
          </el-button>
          <el-button 
            type="warning" 
            size="small" 
            @click="editActivity(row)"
            :disabled="row.status === 'ENDED'"
          >
            编辑
          </el-button>
          <el-button 
            type="danger" 
            size="small" 
            @click="deleteActivity(row)"
            :disabled="row.status === 'ENDED'"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'

const router = useRouter()

// 搜索表单
const searchForm = ref({
  title: '',
  status: '',
  type: ''
})

// 分页数据
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const loading = ref(false)
const activities = ref([])

// 获取活动列表
const fetchActivities = async () => {
  loading.value = true
  try {
    const params = new URLSearchParams({
      page: currentPage.value - 1,
      size: pageSize.value,
      ...searchForm.value
    })

    const response = await fetch(`/api/club/activities/manage?${params}`)
    const data = await response.json()
    activities.value = data.content
    total.value = data.totalElements
  } catch (error) {
    console.error('获取活动列表失败：', error)
    ElMessage.error('获取活动列表失败')
  } finally {
    loading.value = false
  }
}

// 格式化日期
const formatDate = (date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm')
}

// 获取活动类型
const getActivityType = (type) => {
  const types = {
    'SPORTS': '文体活动',
    'ACADEMIC': '学术讲座',
    'VOLUNTEER': '志愿服务',
    'CULTURE': '文化交流',
    'OTHER': '其他'
  }
  return types[type] || type
}

// 获取状态类型
const getStatusType = (status) => {
  const types = {
    'NOT_STARTED': 'info',
    'ENROLLING': 'success',
    'ENDED': 'danger',
    'FULL': 'warning'
  }
  return types[status] || 'info'
}

// 查看详情
const viewDetails = (activity) => {
  router.push(`/club/activities/${activity.id}`)
}

// 编辑活动
const editActivity = (activity) => {
  router.push(`/club/activities/${activity.id}/edit`)
}

// 删除活动
const deleteActivity = async (activity) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除该活动吗？删除后将无法恢复。',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    await fetch(`/api/club/activities/${activity.id}`, {
      method: 'DELETE'
    })

    ElMessage.success('删除成功')
    fetchActivities()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除活动失败：', error)
      ElMessage.error('删除活动失败')
    }
  }
}

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1
  fetchActivities()
}

const resetSearch = () => {
  searchForm.value = {
    title: '',
    status: '',
    type: ''
  }
  handleSearch()
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchActivities()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchActivities()
}

// 初始化
onMounted(() => {
  fetchActivities()
})
</script>

<style lang="scss" scoped>
.manage-activities {
  padding: 20px;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .search-bar {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style> 